<html>
  <head>
    <title>Scandy</title>
  </head>
  <body>
    <div class="invisibleStatusBar" id="statusBar"></div>
    <div class="titleHeader" id="titleHeader">Scandy</div>
    <div class="toolList" id="toolList"></div>
    <div class="inputBox" id="inputBox"></div>
    <div class="output" id="output"></div>
    <script>
        // build the android object
        var droid = new Android();


        // this reports status messages to the user
        var reportStatus = function(data) {

            // get the message and type of status update
            statusMessage = data.data;
            bar = document.getElementById("statusBar");
            bar.innerHTML = statusMessage;
        }
        droid.registerCallback('reportStatus', reportStatus);


        // this is the event that adds tools for us
        var addTool = function(data) {
            // now we get the current html in the tools section
            currentToolList = document.getElementById("toolList");
            // ...and add the new tool to it
            currentValue = currentToolList.innerHTML += data.data;
        }
        droid.registerCallback("addTool", addTool);


        // this is the event that gives us output
        var setOutput = function(data) {

            // get the output from the event
            output = data.data;

            // write it to the output area
            document.getElementById("output").innerHTML = output;
        }
        droid.registerCallback("setOutput", setOutput);


        // this is the event that gives us output
        var addOutput = function(data) {

            // get the output from the event
            output = data.data;

            // write it to the output area
            document.getElementById("output").innerHTML += output;
        }
        droid.registerCallback("addOutput", addOutput);


        // this fills the input form with the appropriate fields
        var setInput = function(data) {
            
            // set the innerHTML element of the inputBox to the
            // given form
            document.getElementById("inputBox").innerHTML = data.data;
        }
        droid.registerCallback('setInput', setInput);


        // this calls the task
        var runTask = function(taskName) {

            // get the form
            form  = document.getElementById('inputForm');

            // get the form values we want
            numberOfFields = form.length;
            var fieldValues = new Array(numberOfFields);
            for (var i=0; i < numberOfFields; i++) {
                fieldValues[i] = form.elements[i].value;
            }

            // construct the json object to pass back
            output = {'taskName': taskName, 'arguments': fieldValues};
            json_obj = JSON.stringify(output);
            
            // post the event
            droid.eventPost('runTask', json_obj);

            // to satisfy the forms
            return false;
        }


        // selects the task
        var selectTask = function(taskName) {

            // send the event notifying the python script that we've
            // selected the task we want to run. That will trigger it
            // to set the inputForm
            droid.eventPost('selectTask', taskName);

            // for forms
            return false;
        }


    </script>
  </body>
</html>
